<%@ page language="java" contentType="text/html;charset=UTF-8"
   	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="images/icon.jpg"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
	<form action="search_videos.html" method="post">
	<table cellpadding="0" cellspacing="0" border="0" width="690" align="center">
		<tr>
			<td></td>
			<td colspan="5" align="left">
				<table width="690"  border="0"​​ cellpadding="0" cellspacing="0">
					<tr>
						<td width="10%">សូមបញ្ចូលពាក្យគន្លឹះ&nbsp;</td>
						<td width="30%"><input type="text" name="txtkeyword" value="${keywords}" style="width:200px;height:16px;"/></td>
						<td width="30%">
							<select name="txtcat" style="height:22px;">
								<option value="0">All Categories</option>
								<c:forEach var="y" begin="0" end="${fn:length(categories)-1 }" step="1" varStatus="status">
									<option value="${categories[y].CATEGORY_ID}">
										<c:out value="${categories[y].CATEGORY_NAME}"></c:out>
									</option>
								</c:forEach>	
							</select>
						</td>
						<td>&nbsp;&nbsp;<input type="submit" value="ស្វែងរក" class="input_button" style=" height:23px;"></td>
					</tr>
				</table>
			</td>
		</tr>
		<tr><td colspan="6">&nbsp;</td></tr>
		<tr>
			<td width="25" style="border-right: #AAA solid 1px;"> </td>
			<td colspan="4" valign="middle" align="left" height="25" class="tableheader" style="border-top: #AAA solid 1px; border-bottom: #AAA solid 1px;">វីដេអូដែលគេនិយមមើល</td>
			<td width="25" width="25" style="border-left: #AAA solid 1px;"> </td>
		</tr>
		<tr>
			<td style="border-right: #CCC solid 1px;"></td>
			<td colspan="4">&nbsp;</td>
			<td style="border-left: #CCC solid 1px;"></td>
		</tr>
	<c:choose>
		<c:when test="${fn:length(topvideos)>0}">
			<c:forEach var="x" begin="1" end="2" step="1" varStatus ="status">
				<tr valign="top">
					<td style="border-right: #CCC solid 1px;"></td>
					<c:forEach var="i" begin="${(x*4)-4}" end="${(x*4)-1}" step="1" varStatus ="status">
					<td height="150" width="180" align="center">
						<c:if test="${i<=fn:length(topvideos)-1 }">
							<a href="view_video.html?video_id=${topvideos[i].FILE_ID}"><img src="${topvideos[i].FILE_PATH}/Images/${topvideos[i].IMAGE_NAME}" width=150px></a><br>
							<a href="view_video.html?video_id=${topvideos[i].FILE_ID}"><c:out value="${topvideos[i].FILE_TITLE}"></c:out></a><br/>
							<span style="color: #444; font-size: 10px;"><c:out value="${topvideos[i].VIEW_NUMBER}"></c:out> ទស្សនា</span>
						</c:if>
					</td>
					</c:forEach>
					<td width="25" style="border-left: #CCC solid 1px;"> </td>
				</tr>
			</c:forEach>
		</c:when>
	</c:choose>
		<tr>
			<td></td>
			<td height="10" colspan="4" style="border-top: #CCC solid 1px;"> </td>
			<td></td>
		</tr>
		<tr><td colspan="6" height="10">&nbsp;</td></tr>
		
		<tr>
			<td width="25" style="border-right: #AAA solid 1px;"> </td>
			<td colspan="4" valign="middle" align="left" height="25" class="tableheader" style="border-top: #AAA solid 1px; border-bottom: #AAA solid 1px;">វីដេអូផ្សេងទៀត</td>
			<td width="25" width="25" style="border-left: #AAA solid 1px;"> </td>
		</tr>
		<tr>
			<td style="border-right: #CCC solid 1px;"></td>
			<td colspan="4">&nbsp;</td>
			<td style="border-left: #CCC solid 1px;"></td>
		</tr>
<c:choose>
	<c:when test="${fn:length(topvideos)>0}">
	<c:forEach var="x" begin="1" end="3" step="1" varStatus ="status">
		<tr valign="top">
			<td style="border-right: #CCC solid 1px;"></td>
			<c:forEach var="i" begin="${(x*4)-4}" end="${(x*4)-1}" step="1" varStatus ="status">
			<td height="150" width="180" align="center">
				<c:if test="${i<=fn:length(othervideos)-1 }">
					<a href="view_video.html?video_id=${othervideos[i].FILE_ID}"><img src="${othervideos[i].FILE_PATH}/Images/${othervideos[i].IMAGE_NAME}" height=100px width=140px></a><br>
					<a href="view_video.html?video_id=${othervideos[i].FILE_ID}"><c:out value="${othervideos[i].FILE_TITLE}"></c:out></a><br/>
					<span style="color: #444; font-size: 10px;"><c:out value="${othervideos[i].VIEW_NUMBER}"></c:out> ទស្សនា</span>
				</c:if>
			</td>
			</c:forEach>
			<td width="25" style="border-left: #CCC solid 1px;"> </td>
		</tr>
	</c:forEach>
		<tr>
			<td></td>
			<td colspan="4" style="border-top: #CCC solid 1px;"></td>
			<td></td>
		</tr>
		<tr><td colspan="6" height="10">&nbsp;</td></tr>
		<tr>
			<td></td>
			<td colspan="4" align="left"><a href="view_all_videos.html">បង្ហាញទាំងអស់...</a></td>
		</tr>
		</c:when>
	</c:choose>
		<tr>
			<td></td>
			<td height="10" colspan="4" style="border-top: #CCC solid 1px;"></td>
			<td></td>
		</tr>
</table>
</form>
</body>
</html>